<template>
  <div>
    <div class="new_Bar" @click="go_particulars(postList.id)">
      <!-- 视频 -->
      <div class="video" v-if="postList.type==2">
        <h3>{{postList.title}}</h3>
        <div class="videe_main">
          <img v-if="isImgSrc" :src="postList.cover[0].url" alt />
          <img v-else :src="$axios.defaults.baseURL +  postList.cover[0].url" alt />
          <div class="icon-bofang iconfont"></div>
        </div>
        <p>
          <span>{{postList.user.nickname}}</span>
          <span>{{postList.comment_length}}跟帖</span>
        </p>
      </div>
      <!-- 单图 -->
      <div class="photoOne" v-else-if="postList.type == 1 && postList.cover.length < 3 ">
        <div class="photoOne_left">
          <h3>{{postList.title}}</h3>
          <p>
            <span>{{postList.user.nickname}}</span>
            <span>{{postList.comment_length}}跟帖</span>
          </p>
        </div>
        <div class="photoOne_right">
          <img v-if="isImgSrc" :src="postList.cover[0].url" alt />
          <img v-else :src="$axios.defaults.baseURL +  postList.cover[0].url" alt />
        </div>
      </div>
      <!-- 三图 -->
      <div class="photoThree" v-else-if="postList.type == 1 && postList.cover.length >= 3 ">
        <h3>{{postList.title}}</h3>
        <div class="phont_main" v-if="isImgSrc">
          <img v-for="(item,index) of postList.cover" :key="index" :src="item.url" alt />
        </div>
        <div class="phont_m" v-else>
          <img
            v-for="(item,index) of postList.cover"
            :key="index"
            :src="$axios.defaults.baseURL +item.url"
            alt
          />
        </div>
        <p>
          <span>{{postList.user.nickname}}</span>
          <span>{{postList.comment_length}}跟帖</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postList"],
  methods: {
    go_particulars(id) {
      this.$emit("go_particulars", id);
    }
  },
  computed: {
    isImgSrc() {
      console.log(this.postList.cover[0].url.indexOf("http") > 1);

      return this.postList.cover[0].url.indexOf("bucket") > 1;
    }
  }
};
</script>

<style lang="less" scoped>
.new_Bar {
  padding: 5px;
}
h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p {
  padding-top: 2.778vw;
  span {
    padding-right: 2.778vw;
    font-size: 3.333vw;
  }
}
// 视频
.video {
  display: flex;
  flex-direction: column;
  height: 300px;
  h3 {
    width: 77.778vw;
  }
  .videe_main {
    width: 100%;
    margin: 2.778vw 0;
    position: relative;
    > img {
      height: 55.556vw;
      width: 100%;
    }
    .icon-bofang {
      font-size: 16.667vw;
      color: wheat;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
// 单图
.photoOne {
  display: flex;
  height: 27.778vw;
  justify-content: space-between;
  align-items: center;

  .photoOne_left {
    display: flex;
    flex-direction: column;
    flex: 1;
    h3 {
      width: 61.111vw;
    }
  }
  .photoOne_right {
    width: 34.722vw;
    height: 22.222vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// 三图
.photoThree {
  display: flex;
  flex-direction: column;
  .phont_main {
    margin: 2.778vw 0;
    display: flex;
    justify-content: space-around;
    > img {
      height: 100px;
      width: 32%;
    }
  }
  h3 {
    width: 77.778vw;
  }
  p {
    padding-top: 0;
  }
}
</style>